//zTree的加载函数
function generateTree(){
    // 通过ajax获取树的数据
    $.ajax({
        url:"menu/get/whole/tree.json",
        type:"post",
        dataType:"json",
        success:function (responseData) {
            if(responseData.result == "SUCCESS"){
                // 实现zTree的核心代码
                // 从demo拷贝，实现zTree需要配置setting和zNodes
                // 所有的配置，都可以在api找到，api需要tomcat来运行
                var setting = {
                    view: {
                        // 自定义图标
                        addDiyDom: myAddDiyDom,
                        // 移动到某节点时，显示操作按钮
                        addHoverDom: myAddHoverDom,
                        // 把鼠标从节点移动后，删除后面显示的操作按钮
                        removeHoverDom: myRemoveHoverDom
                    },

                    data: {
                        key: {
                            //给data-key-url赋予一个不存在的url，就可实现菜单点击不跳转
                            url: "xUrl"
                        }
                    }
                };

                var zNodes = responseData.data;
                $(document).ready(function(){
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                });
            }

            if(responseData.result == "FAILED"){
                layer.msg(responseData.message);
            }
        },
        error:function () {
            layer.msg("请求出错！");
        }
    })
}



//自定义图标函数，使用数据库存储的样式代替默认样式
//params: treeId:树所在<ul>里面的id
//        treeNode:后台返回json数据，被zTree封装成独立的节点
//treeNode里面的属性：tId、 parentTId 、children 、level属性都是常用属性
function myAddDiyDom(treeId, treeNode) {
    // console.log(treeId);
    //  console.log(treeNode);
    var spanId = treeNode.tId + "_ico";
    $("#"+spanId).removeClass().addClass(treeNode.icon);
}

// 移动到某节点时，显示操作按钮
// 思路：使用jquery的after函数，拼接图标
function myAddHoverDom(treeId, treeNode) {
    //所有的即将显示的图标，都要在这个a标签后显示，通过审查元素可以看出来
    var anchorId = treeNode.tId + "_a";
    var spanId = "btnGroup" + treeNode.tId;
    //创建三个按钮 addBtn(添加) editBtn(修改) removeBtn(删除0
    var addBtn = "<a id="+treeNode.id+" class='addBtn btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' >&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg '></i></a>";
    var editBtn = "<a id="+treeNode.id+" class='editBtn btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;'  title='修改权限信息'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg '></i></a>";
    var removeBtn = "<a id="+treeNode.id+" class='removeBtn btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' >&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg '></i></a>";

    // 判断是几级菜单
    // 根节点 treeNode.level=0,只可添加，不可修改删除
    // 分支节点 treeNode.level=1,可添加，可修改,判断后删除（有子节点不可删除，没有子节点可以删除），使用treeNode.children.length判断
    // 叶子节点 treeNode.level=1，不可添加，可修改，可删除
    var btnHtml = "";
    if(treeNode.level==0){
        btnHtml = addBtn;
    }
    if(treeNode.level==1){
        btnHtml = addBtn + editBtn ;
        var length = treeNode.children.length;
        if(length==0){
            btnHtml = addBtn + editBtn+ removeBtn;
        }
    }
    if(treeNode.level==2){
        btnHtml = editBtn + removeBtn;
    }

    //先判断到底之前有没有添加，不能重复添加。
    if($("#"+spanId).length>0){
         return ;
     }
    $("#"+anchorId).after("<span id="+spanId+">"+btnHtml+"</span>");
}

// 把鼠标从节点移动后，删除后面显示的操作按钮
// 以为添加的时候鼠标一移动就开始添加，可能添加多个，但是这个remove（）只能删除一个
// 解决方法：在myAddHoverDom检查数量，大于0就不添加了
function myRemoveHoverDom(treeId, treeNode) {
    // 拼接按钮组的id
    var spanId = "btnGroup" + treeNode.tId;
    // 移除对应的元素
    $("#"+spanId).remove();
}